<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>查询商品案例</title>
    <style>
        body {
            width: 500px;
            margin: 0 auto;
        }
        
        .search {
            margin: 30px 30px;
        }
        
        .search input {
            width: 50px;
        }
        
        table {
            width: 350px;
            /* margin: -60px 400px; */
            border-collapse: collapse;
            text-align: center;
            border: 1px solid #aa650a;
            color: #050505;
            background-color: #fff8d5;
        }
        
        thead tr {
            height: 40px;
            background-color: #926c1a;
            color: rgb(22, 21, 12);
        }
        
        tr th {
            border: 1px dashed #998410;
            color: #fff;
        }
        
        td {
            border: 1px dashed #d1b65e;
        }
        
        ul {
            list-style-type: none;
            padding: 0;
            position: absolute;
            width: 300px;
            /* 与输入框宽度相同 */
            background-color: #b9b6b6;
            /* 设置背景颜色 */
            border: 1px solid #ccc;
            /* 设置边框 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            /* 添加阴影效果 */
            /* bottom: calc(100% + 10px); */
            /* 与输入框顶部对齐 */
            left: 350px;
            /* 与输入框左对齐 */
            z-index: 1000;
            /* 确保在顶层显示 */
            display: none;
        }
        
        li {
            padding: 10px;
            cursor: pointer;
        }
        
        li:hover {
            background-color: #f4f4f4;
        }
    </style>

    <!-- <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        
        
    </style> -->
</head>

<body>
    <div class="search">
        <h2>童书图书查询</h2>
        <h5>
            按照价格查询: <input type="text" class="start" /> -
            <input type="text" class="end" />
            <button class="search_price">搜索</button>
        </h5>
        <h5>
            按照图书名称查询:
            <input id="searchInput" type="text" class="product" />
            <button class="search_pro">查询</button>
            <ul id="searchResults"></ul>
        </h5>
    </div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>价格</th>
            </tr>
        </thead>
        <tbody>
            <!-- 这里将动态添加方法 -->
        </tbody>
    </table>
    <script>
        //利用新增数组方法操作数据
        var data = [{
            id: 1,
            pname: "少年读史记",
            price: 50,
        }, {
            id: 2,
            pname: "神奇校车",
            price: 99,
        }, {
            id: 3,
            pname: "画给孩子的中国历史",
            price: 40,
        }, {
            id: 4,
            pname: "少年读山海经",
            price: 50,
        }, {
            id: 5,
            pname: "铃木绘本系列宫西达",
            price: 22.5,
        }, {
            id: 6,
            pname: "皮特猫",
            price: 69.9,
        }, {
            id: 7,
            pname: "窗边的小豆豆",
            price: 39.5,
        }, {
            id: 8,
            pname: "东野圭吾：我的老师是侦探",
            price: 42,
        }, {
            id: 9,
            pname: "万物由来科学绘本",
            price: 50,
        }, {
            id: 10,
            pname: "夏洛的网",
            price: 37,
        }, ];
        //1.获取对应元素
        var tbody = document.querySelector("tbody");
        var search_price = document.querySelector(".search_price");
        var start = document.querySelector(".start");
        var end = document.querySelector(".end");
        var product = document.querySelector(".product");
        var search_pro = document.querySelector(".search_pro");
        setData(data); //页面加载把数据渲染到页面上

        //2.把数据渲染到页面中
        function setData(mydata) {
            //先清空原来tbody的数据
            tbody.innerHTML = "";
            mydata.forEach(function(value) {
                //console.log(value);
                var tr = document.createElement("tr");
                tr.innerHTML = `<td>${value.id}</td><td>${value.pname} </td><td>${value.price}</td>`;
                tbody.appendChild(tr);
            });
        }

        //3.根据价格查询商品
        //当我们点击了按钮,就可以根据商品的价格去筛选数组里面的对象
        search_price.addEventListener("click", function() {
            // alert(11);
            if (start.value == "" || end.value == "") {
                setData(data);
                return;
            }
            var newData = data.filter(function(value) {
                return value.price >= start.value && value.price <= end.value;
            });
            //filter方法来做到筛选数据的效果，具体使用方法参考文档
            // console.log(newData);
            //把筛选完后的对象渲染到页面中
            setData(newData);
        });

        //4.根据商品名称查找商品
        //如果查询数组中唯一的元素，用some方法更合适,因为它找到这个元素，就不再进行循环，效率更高
        search_pro.addEventListener("click", function() {
            if (product.value == "") {
                setData(data);
                return;
            }
            var arr = [];
            data.some(function(value) {
                if (value.pname == product.value) {
                    // console.log(value);
                    arr.push(value);
                    return true; //return 后面必须写true
                }
            });
            //把获取的数据渲染到页面中
            setData(arr);
        });
    </script>

    <script>
        const searchInput = document.getElementById('searchInput');
        const searchResults = document.getElementById('searchResults');

        // 模拟的数据集合，实际应用中可以是从服务器端获取的数据
        const datas = ['少年读史记', '神奇校车', '画给孩子的中国历史',
            '少年读山海经', '铃木绘本系列宫西达', '皮特猫',
            '窗边的小豆豆', '东野圭吾：我的老师是侦探',
            '万物由来科学绘本', '夏洛的网'
        ];

        searchInput.addEventListener('input', function() {
            const searchText = this.value.toLowerCase();
            const matchedResults = datas.filter(item => item.toLowerCase().includes(searchText));
            displayResults(matchedResults);
        });

        function displayResults(results) {
            searchResults.innerHTML = '';
            const inputRect = searchInput.getBoundingClientRect();
            searchResults.style.top = `${inputRect.top - searchResults.offsetHeight + 20}px`;

            results.forEach(result => {
                const li = document.createElement('li');
                li.textContent = result;
                li.addEventListener('click', function() {
                    searchInput.value = result;
                    searchResults.innerHTML = '';
                });
                searchResults.appendChild(li);
            });

            // 显示匹配框
            searchResults.style.display = 'block';
        }

        // 在文档上添加点击事件监听器以隐藏匹配框
        document.addEventListener('click', function(e) {
            // 检查匹配框是否可见
            if (searchResults.style.display !== 'none') {
                // 如果匹配框可见，则隐藏它
                searchResults.style.display = 'none';
            }
        });
    </script>
</body>

</html>